import React, { Component } from 'react'
import {SignContainer}from './StyledChildView'
import{ HotTaskContainer} from '../StyledHome'
import Navigation from 'components/Navigation/Navigation'
import back from 'images/nav/whiteback@3x.png'
import { Progress, Button, WingBlank, WhiteSpace } from 'antd-mobile';
import gift from 'images/home/sign/gift@2x.png'
import more from 'images/home/sign/gengduo@2x.png'
import level from 'images/home/sign/dengji@2x.png'



const taskArr = [
    {
        tName:"快递乐乐",
        tContent:"北京科技职业学院有一个快递需要找代领",
        tDate:"2019-10-26",
        tTime:"18:00~20:00",
        tMoney:"5.00",
        tTag:"001"
    },
    {
        tName:"代课",
        tContent:"今天北科阶梯四教室，谁来替我上一节课",
        tDate:"2019-10-25",
        tTime:"18:00~20:00",
        tMoney:"5.00",
        tTag:"002"
    }
    // },
    // {
    //     tName:"代抄笔记",
    //     tContent:"我太难了，谁来替我抄笔记",
    //     tDate:"2019-10-10",
    //     tTime:"18:00~20:00",
    //     tMoney:"5.00",
    //     tTag:"003"
    // },
    // {
    //     tName:"代刷网课",
    //     tContent:"我太难了，谁来替我刷网课",
    //     tDate:"2019-10-10",
    //     tTime:"18:00~20:00",
    //     tMoney:"5.00",
    //     tTag:"004"
    // }
    

    
]

export default class Sign extends Component {
    state = {
        percent:0,
        num: 0
      };
      add = () => {
        let p = this.state.percent + 10;
        this.setState({num: this.state.num + 1})
       
        if (this.state.percent >= 100) {
          p = 0;
         
        }
        console.log(this.state.percent)
        this.setState({ percent: p });
        
      }
    render() {
        const { percent } = this.state;
        return (
            
            <div>
                <Navigation
                title = "签到"
                leftMargin = '0 0 0 .15rem'
                leftWidth = '25%'
                leftHeight = '.44rem'
                titleSize = '.17rem'
                leftImg = {back}
                leftImgWidth = '.2rem'
                clickLeft = {()=>this.onClickLeft("left")}
                ></Navigation>
                <SignContainer>
                    <div className="signContent">
                        <div className="topContent">
                            <span>已坚持</span>
                            <span className="signIcon">
                                {/* <i>0</i>
                                <i>0</i> */}
                                <i>{this.state.num}</i>
                            </span>
                            <span>天签到</span>
                        </div>
                    </div>
                    <div className="centerContent">
                        <div className="giftContent">
                            <p>坚持越久，奖励越多</p>
                            <p className="btnSign" onClick={this.add}>签到</p>
                        </div>
                        <div className="show-info">
                            {/* <img src={gift} className="signGift" alt=""/> */}
                            <div className="progress"><Progress percent={percent} position="normal" /></div>
                            <div aria-hidden="true">{percent}%</div>
                            </div>
                        </div>
                    <div className="sTitle">
                        <div><h3>马上挣钱</h3></div>
                        <div><img className="more" src={more} onClick={()=>this.moreChange()}  alt=""/></div>
                    </div>
                    <HotTaskContainer>
                        <div className="taskItem">
                        <ul>
                            {
                                taskArr.map((value,index)=>(
                                    //   console.log(value)
                                        <li key={value.tTag}>
                                        <div className="taskLeft">
                                            <h4>{value.tName}</h4>
                                            <div className="taskContent">{value.tContent}</div>
                                            <div className="taskTime">
                                            <span>{value.tDate}</span> <span>{value.tTime}</span>
                                            </div>
                                        </div>
                                        <div className="taskRight">
                                            <span>￥</span> <span>{value.tMoney}</span>
                                        </div>
                                </li>
                                ))
                            }
                        </ul>
                    </div>
                    </HotTaskContainer>
                </SignContainer>
            </div>
        )
    }
    onClickLeft(tag){
        this.props.history.go(-1)
    
      }
      moreChange(){
        console.log("点击进入大厅")
        this.props.history.push('/index/hall/whole')
    
}
// componentDidMount(){
//     this.setState({
//         num = this.state.num ++
//     })
// }
}
